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Ders 1 : Başlangıç Kodları - HTML Dersleri 


HTML (Hyper Text Markup Language- Hiper Yazı İşaretleme Dili), internet sayfaları oluşturmayı 
sağlayan işaretleme dilidir. İnternet tarayıcıları, HTML taglarını göstermezler, onları sayfa içeriğini 
tanımlamak için kullanırlar. İlk HTML versiyonu 1991 yılında çıkmıştır. 2014 yılında ise HTML5 
versiyonu çıktı. Biz HTML derslerimizi HTML>5 standartlarına uygun olarak anlatmaya çalışacağız. 


Bir tekst dosyası açalım ve uzantısını html olarak ayarlayalım. Biz dosyamızın adını 001.html 
koyduk. Bu oluşturduğumuz dosyayı notepad veya geany benzeri bir editörle açalım. İçerisine 
sadece "Selam olsun" yazalım ve editörü kapatalım. Şimdi bir internet tarayıcısı (Firefox, Chrome 
veya benzeri) ile tekst dosyamızı açalım. Yazdığımız yazıyı tarayıcıda göreceğiz. Maalesef doğru 
kodlama şekli bu değil, tarayıcımız bizim yerimize kodu tamamladı. 


Şimdi html uzantılı yeni bir tekst dosyası daha açalım. (Biz 001b.html olarak açtık) Şu kodları 
dosyamıza yazalım: 

<!IDOCTYPE htmi> 

<html> 

<head> 

<meta charset-"UTF-8"> 

</head> 

<body> 

Selam olsun sizlere, tüm karakterler UTF-8 kodlaması ile istediğimiz biçimde görüntüleniyor. 
</body> 

</htmi> 

<!IDOCTYPE htmi> ile dosyamızın tanımını yapmış olduk. Bu deyimi tercih ettiğinizde HTML5'in 
özelliklerini kullacağınızı, dosyanızı HTML5 standartlarına göre hazırladığınızı internet tarayıcınıza 
anlatmış oluyorsunuz. HTML.5'ten önceki versiyonlara ait uzun kodlama tanımlamalarını da belki 
görmüşsünüzdür, örneğin HTML 4.01'e ait üç farklı tanımlama şekli var, dilerseniz onları da 
kullanabilirsiniz, ancak son teknoloji genelde en iyisidir, biz HTML5'in nimetlerinden faydalanmayı 
tercih edeceğiz. 


<html> ile </htmil> tagları arasına kodlarımızı yerleştirdik. Bu iki tag başlangıcı ve bitişi 
belirlemektedir. 


<head> ile </head> tagları arasına başlıklar ve tanımlamalar konulur. Örneğin karakter 
kodlamamızın UTF-8 olduğunu meta tagı ile tanımladık. Eğer bu tanımlamayı yapmasaydık Türkçe 
karakterleri düzgün görüntüleyemeyecektik. 


<body> ile </body> tagları arası ise sayfamızın gövdesi yani görüntülecek kısmıdır. Buraya 
yazdığımız kodlarla sayfada nelerin görüntüleceğini tarayıcımza anlatacağız. 


Kodlardan da anlayacağınız üzere HTML standartlarında başlangıç tagı < işareti ile aynı tagın bitişi 
ise </ işareti ile belirlenir. Tabii bazı tagların HTML5'te bitişini bildirmemize gerek yoktur. Örneğin 
yukarıdaki kodumuzdaki meta tagında olduğu gibi. 


Standart kodlama için gerekli olan bu kodları öğrendikten sonra birkaç önemli bilgiyi daha 
öğrenirseniz, ilk dersi tamamladığınızda artık HTML ile düz yazı sunumu hazırlayabilir yeterliliğe 
de sahip olacaksınız. Bir yazı sunumu hazırladığınızda başlık kısmını <h1> (en büyük başlık), 
<h2>, <h3>, <h4>, <h5>, <h6> (en küçük başlık) tagları ile belirtebilirsiniz. Öntanımlı 
büyüklükleri şu şekilde görüntülenecektir: 


<h1>Başlık</h1> 
Başlık 


<h2>Başlık</h2> 


Başlık 


<h3>Başlık</h3> 


Başlık 


<h4>Başlık</h4> 


Başlık 


<h5>Başlık</h5> 


Başlık 


<h6>Başlık</h6> 


Başlık 


Html dosyalarınızdaki boşluklar, siz aksini belirtmediğiniz sürece sadece tek bir boşluk olarak 
algılanacaktır. Bunu &nbsp; ile değiştirebilir, dilediğiniz kadar boşluk bırakabilirsiniz. Burada 
olduğu gibi. Nasıl birden fazla boşluk bırakabildiğimizi incelemek için Ctrl tuşunu basılı tutarken u 
harfine basınız. Sayfanın kaynak kodu açılacaktır. İlgili satırları bulup kodu inceleyin, &nbsp; yani 
boşluk bırakma kodunu nasıl kullandığımızı görmüş olacaksınız böylelikle. Bunun dışında <pre> 
tagı da boşluk bırakmak için harika bir seçimdir. İlerideki derslerde <pre> tagına da yer ayırmayı 
planlıyoruz. 


İlk dersimizde son olarak <br> tagına değinelim. Bu en fazla kullanacağınız taglardan biridir. Bunu 
yazı dosyalarında kullandığınız Enter tuşuna benzetebiliriz. Her kullandığınızda bir satır aşağıya 
geçmiş olursunuz. <br> tagını HTML.5'te bitiş tagı olmadan kullanabiliriz. Her kullanışımız bir satır 
boşluk bırakacaktır. Evet, artık html dili ile bir yazı hazırlayabiliriz. Bu kodu 001c.html dosyası 
içerisinde bulabilirsiniz: 

<!IDOCTYPE htmi> 

<html> 

<head> 

<meta charset-"UTF-8"> 

</head> 

<body> 

<h1>Tekir</h1> Nasreddin Hoca eve bir okka yahnilik et almış, bir ara işten eve uğrayarak 
hanımına etleri teslim etmiş ve işe geri dönmüş. Hanımı hazırlıklarını tamamlayıp etleri pişirdiği 
sırada misafirler çıkagelmişler. Misafirlere karşı cömert olan kadın, pişirdiği etleri onlara ikram 
etmiş, tüm etler bitmiş. Akşam yahnilik etin hasretiyle eve gelen Nasreddin Hoca, hanımının önüne 
koyduğu bir tabak pilavı görünce, şaşırıp yahnilik eti neden pişirmediğini sormuş. Nasreddin 
Hoca'dan çekinen hanımı, eti bizim kedi Tekir yedi demiş. Nasreddin Hoca hışımla fırlayarak 
Tekir'in peşine düşmüş. Tekir'i yakalamış, ancak bakmış ki Tekir'in neredeyse kemikleri görünecek. 
Tekir'i tutmuş ve teraziye çıkarmış, bakmış ki bir okka geliyor: 

<br> 

"Yahu hatun" demiş, 

<br> 

"Bizim eti Tekir yedi ise, Tekir nerede? Yok bizim Tekir burada ise yahnilik et nerede?" 

<br> 

</body> 

<html> 


Bilgi notu olarak eklemeliyiz ki, h1'den h6'ya kadar olan başlık taglarından sonra br tagını 
kullanmamıza gerek yoktur. Onlar standart olarak satır atlatırlar. (Aksi tanımlanmadığı sürece) 


İlk dersimizin dosyalarını indirmek için tıklayınız. 


Ders 2 : Resim Eklemek - HIML Dersleri 


Bir yazı dosyası açalım ve uzantısını html olarak ayarlayalım. Biz dosyamızın adını 002.html 
koyduk. 

Şu kodları dosyamıza yazalım: 

<!IDOCTYPE htmi> 

<html> 

<head> 

<meta charset-"UTF-8"> 

<meta name-"viewport" content-"width-device-width, initial-scale-1"> 

</head> 

<body> 

<h1>Tekir</hh1> 

<img src-"./resimler/1920.jpg" title-"Kasaba" alt-"1920" width—"10090"> 

Nasreddin Hoca eve bir okka yahnilik et almış, bir ara işten eve uğrayarak hanımına etleri teslim 
etmiş ve işe geri dönmüş. Hanımı hazırlıklarını tamamlayıp etleri pişirdiği sırada misafirler 
çıkagelmişler. Misafirlere karşı cömert olan kadın, pişirdiği etleri onlara ikram etmiş, tüm etler 
bitmiş. Akşam yahnilik etin hasretiyle eve gelen Nasreddin Hoca, hanımının önüne koyduğu bir 
tabak pilavı görünce, şaşırıp yahnilik eti neden pişirmediğini sormuş. Nasreddin Hoca'dan çekinen 
hanımı, eti bizim kedi Tekir yedi demiş. Nasreddin Hoca hışımla fırlayarak Tekir'in peşine düşmüş. 
Tekir'i yakalamış, ancak bakmış ki Tekir'in neredeyse kemikleri görünecek. Tekir'i tutmuş ve 
teraziye çıkarmış, bakmış ki bir okka geliyor: 

<br> 

"Yahu hatun" demiş, 

<br> 

"Bizim eti Tekir yedi ise, Tekir nerede? Yok bizim Tekir burada ise yahnilik et nerede?" 

<br> 

</body> 

</html> 

<img src-"./resimler/1920.jpg" title-"Kasaba" alt-"1920" width—"10090"> tagı ile resmimizi geçen 
dersteki yazımıza eklemiş olduk. title-"Kasaba" tanımı ile resmimizin üzerinde mouse ile 
gezinirken görünecek yazıyı tanımlamış olduk. alt-"1920" ile resmimiz açılmadığı takdirde 
görüntülenecek altındaki yazıyı tanımladık. width-"10096" ile resmimizin genişliğini bulunduğu 
elementin tamamını kaplayacak şekilde ayarladık. Genişliği dilersek uzunluk belirterek 
ayarlayabiliriz. Ayrıca height-"400px" veya height-"300em" gibi bir tanımlama ekleyerek 
yüksekliği de istediğimiz şekilde ayarlayabiliriz. Ancak cep telefonu ve tablet uyumu açısından 
yüksekliği tanımlamadan genişlik için yüzdesel bir ölçü kullandık. Tarayıcınızın boyutunu 
değiştirerek sayfayı açmayı denediğinizde resmin sayfanın boyutuna göre konumlandığını 
görebilirsiniz. Günümüzde cep telefonları ve tabletlerden internet kullanımı oldukça yaygınlaşmış 
durumda, bir internet sitesi hazırlerken onlarla uyumlu olmasını gözardı etmek pekte makul 
olmayacaktır. Bu konuda farklı boyuta resmin farklı ölçeklendirilmiş hallerini kullanmak gibi 
çözüm yolları da var. Yeni eklediğimiz viewport meta tagı ile cep telefonu-tablet uyumluluğunu 
tarayıcımıza bildirmiş olduk. Viewport meta tagını da standart olarak kullanmanız faydalı olacaktır. 


src-"./resimler/1920.jpg" tanımlaması ile kullanacağımız resimin yerini bildirdik. Tarayıcımıza 
bulunduğumuz dizindeki resimler klasörünün içine bak ve 1920.jpg resimini bularak sayfada göster 
demiş olduk. ./ bulunduğumuz dizini simgeler. ../ bir üst dizini simgeler. .../../ iki üst dizini simgeler. 
Bu tanımlamaları kullanarak dilediğiniz klasördeki resimi html dosyanızda kullanabilirsiniz. 


Boyutlandırmada kullandığımız em, göreceli bir değerdir. Değerini kendisine en yakın tanımlanmış 
üst elementten alır. Örneğin bir üst element 20px olarak tanımlanmışsa lem değeri 20px değerine 
eşit olur. 1.5em ise 30px değerine eşit olur. Yüzde olarak tanımlama yapacağımız zaman ise dikkat 
edeceğimiz 96 işaretinin tanımın başına değil, sonuna eklendiğidir. (Türkçe'deki gibi başta değil 
yani) 


<img> tagı için usemap, srcset, sizes, longdesc, ismap, crossorigin gibi farklı tanımlamalar da 
kullanılabilir. Ayrıca html global tanımlamalarından herhangi birisi veya html olay 
tanımlamalarından herhangi birisi de kullanılabilir. 


<img> tagını yazıdan sonra veya başlıktan önce de ekleyebilirdik. Resmimizi body tagının 
içerisinde herhangi bir yere konumlayabiliriz. 


Resimlerinizi optimize ederek yüklemek sayfalarınızın daha hızlı açılmasına katkı sağlayacaktır. 
GNÜU/inux işletim sistemlerinden birini kullanıyorsanız komut satırında jpegoptim, optipng gibi 
programlar işinizi görecektir. Windows üzerinde de çalışan benzeri optimizasyon programları 
mevcut. 


2. dersimizin dosyalarını indirmek için tıklayınız. 


Ders 3 : Yazı Vurgulama Tagları - HTML 


Dersleri 


HTML 5 standartlarına göre başlıklar <h1>, <h2>, <h3>, <h4>, <h5> ve <h6> tagları ile 
belirtilebilir. Bu tagları 2. dersimizde görmüştük. 


Yazı içerisinde vurgulanacak kelime veya kelimeler için <em> tagı kullanılabilir. <em> tagı ibare, 
tabir, deyim belirtmek, vurgulamak için kullanılır. Çoğu tarayıcı <em> tagının vurgusunu standart 


olarak italik göstermektedir. 


Önemli kelimeleri, cümleleri vurgulamak için <strong> tagı kullanılır. Çoğu tarayıcı <strong> tagı 
ile vurgulanan ibareyi kalın harflerle göstermektedir. 


İşaret etmek için <mark> tagı kullanılabilir. Birçok tarayıcı bu tag ile belirtilen yazının arkaplan 
rengini sarı, yazıyı ise siyah renkle göstermektedir. 


Vurgulanan yazıyı kalınlaştıran diğer bir tag ise <b> tagıdır. 
Vurgulanan yazıyı italik gösteren diğer bir tag ise <i> tagıdır. 


Herhangi bir çalışmanın başlığını belirltmek için <cite> tagı kullanılabilir. Çoğu tarayıcı bu tagın 
vurguladığı yazıyı italik olarak gösterecektir. 


Yazının üzerine mouse ile gelindiğinde açıklama, tanımlama eklemek için <dfn> tagı kullanılabilir. 
Title özelliği ile üzerinde iken görünmesini istediğiniz yazıyı belirleyebilirsiniz. 


Bir kısaltmanın altını noktalarla işaretlemek ve açıklamasını eklemek için <abbr> tagı kullanılabilir. 


Bir yazı sahibinin iletişim bilgilerini vermek için <address> tagı kullanılabilir. Bu tag birçok 
tarayıcıda kendiğinden bir satır aşağıya geçerek başlar ve italik olarak gösterilir. 


<blockguote> tagı ile alıntı yazı gösterilebilir. Bu tagın cite özelliği ile alıntı yapılan internet 
adresinin bilgisi verilebilir. 


Paragraf belirlemek için <p> tagı kullanılır, <p> tagı en çok kullanılan html taglarından biridir. 


Kısa alıntılar için <g> tagı kullanılabilir. Bu tagın arasındaki yazı başına ve sonuna gelen tırnak 
işaretleri ile belirtilecektir. 


Yazıyı küçültmek için <small> tagı kullanılabilir. 


<sub> tagı yazıyı yarım satır aşağıdan ve daha küçük göstermeye yarar. <sup> tagı ise yazıyı yarım 
satır yukarıdan ve daha küçük göstermeye yarar. 


Yazıda bir değişiklik yapılacağı zaman <del> ve <ins> tagları kullanılabilir. del tagları arasındaki 
sözcüğün üstü çizilirken, ins tagları arasındaki sözcüklerin altı çizilir. Datetime özelliği eklenerek 
değişiklik tarihi belirtilebilir, cite özelliği ile değişiklik sebebini anlatan sayfaya link verilebilir. 
<bdo> tagı yardımı ile yazının yönünü sağdan sola da ayarlayabiliriz. dir özelliğine rtl atarsak 
sağdan sola, Itr atarsak ise öntanımlı hali olan soldan sağa şekilde yazdırabiliriz. Bir de <bdi> tagı 
vardır, onun yardımıyla farklı yön formatlarındaki yazılar (örneğin Arapça ve Türkçe yazılar) 
beraber yazılabilirler. 


<article> tagı ile diğer yazılardan bağımsız bir yazı içeriğini tanımlayabilirsiniz. 


Zip dosyasını indirerek 003.html kodlarını inceleyebilirsiniz veya tarayıcınızın "sayfanın kaynak 
kodunu göster" seçeneği ile tagların nasıl kullanıldıklarına göz gezdirebilirsiniz. 


Normal cümle yanında : em tagı ile vurgulanmış cümle 
Normal cümle yanında : strong tagı ile vurgulanmış cümle 
Normal cümle yanında : mark tagı ile vurgulanmış cümle 
Normal cümle yanında : b tagı ile vurgulanmış cümle 
Normal cümle yanında : i tagı ile vurgulanmış cümle 


Normal cümle yanında : Cite Tagı ile Vurgulanmış Başlık 





Normal cümle yanında : din tagı ile vurgulanmış cümle, atasözünü görmek için fare ile üzerine 
geliniz 


Normal cümle yanında, abbr tagları arasındaki cümle : Y.M.Y.K.Y. 


address tagının örnek kullanımı: 


Bu yazı fullportal.org tarafından yazılmıştır. 
XXX sok. No:55 
Konak, İzmir 


blockguote ve p taglarının örnek kullanımı, Ahmet internet sitesinde şöyle yazmıştı : 


Bu blockguote ve p taglarının kullanımına bir örnektir. 
Bu blockguote ve p taglarının kullanımına örnek ikinci paragraftır. 


g tagının örnek kullanımı: Atalarımız der ki: Ters giderse kişinin işi, muhallebi yerken 
kırılır dişi 


Normal cümle yanında : small tagları arasındaki cümle 


Normal cümle yanında : sub tagları arasındaki cümle 


Normal cümle yanında : sup tagları arasındaki cümle 


del tagı kullanımı : Bt-eski-cümle 
ins tagı kullanımı : Bu da yeni cümle 


bdo tagı soldan sağa kullanımı : Bu paragraf soldan sağa doğrudur. 
bdo tagı sağdan sola kullanımı : .rudurğod ağas nadlos fargarap uB 


bdi tagının örnek kullanımı: 


* Deneme:ylhl : 20. deneme 


Article tagının kullanımı 


Bu yazıda article tagı kullanılmıştır. 


Ayrıca aside tagı (yazıdaki konuyla ilgili özel not belirtmek için kullanılabilir, açıklama şeklinde), 
pre tagı (yazıyı olduğu gibi gösterir, --html kodlarını değil tabii ki--), kbd tagı (yazıyı monospace 
fontu ile görüntüler, klavye girişi kısaltmasıdır --keyboard input--), samp tagı (yazıyı kbd tagı gibi 
monospace fontu ile görüntüler, bilgisayar programlarının örnek çıktılarını tanımlar), s tagı (artık 
doğru olmayan bilginin üzerini çizer, del tagı gibi), code tagı (bilgisayar kodlarını belirtmekte 
kullanılır, yazıyı monospace fontu ile görüntüler), var tagı (değişken belirtmekte kullanılır) gibi 
taglar da kullanılmaktadır. 


Bir de bugün ek olarak <title> tagından bahsedelim. Başlangıç ve bitiş title tagları arasına internet 
sayfasının tanıtım başlığı yazılır. Bu tag head tagları arasında olmalıdır. Örnek sayfamızda 
(003.html) bu tagın kullanımını da gösterdik. Bu tag arasına yazdığınız yazıyı tarayıcınızın en üst 
kısmında görebilirsiniz. Arama motorları için de önemli taglardan biridir. 


Not: HTML>5 ile uyumlu olmayan tagları yazımıza dahil etmedik. 


3. dersimizin dosyasını indirmek için tıklayınız. 


Ders 4:a, pre, details Tagları - HTML 
Dersleri 


<a> tagı, href özelliği ile belirtilen adrese link vermekte kullanılır. a tagına href özelliğinden başka 
download (belirtilen dosyanın yazıya tıklandığında indirilmesi için), hreflang (bu özellik ile linkin 
dili belirtilebilir), media (href ile belirtilen linkin hangi aygıt/medya için veya hangi sebeple -- 
yazdırma, okuma, projektör vb.-- özelleştirileceğini belirtmekte kullanılır), type (linkin MIME tipini 
belirtmekte kullanılır), rel (link ile bulunduğu sayfanın arasındaki durumu belirtmekte kullanılır), 
target ( blank, top, self, parent veya çerçeve --frame-- ismi değer olarak atanabilir. Belirtilen 





değer ile linkin nasıl açılacağı bildirilmiş olunur. Örneğin blank ile link yeni bir sayfada açılır.) 
özellikleri atanabilir. 


<details> tagı, üzerine tıklandığında görüntülenecek bilgileri açıp kapamakta kullanılabilir. open 
özelliği (true veya false olarak ayarlanabilir, true değeri atanırsa veya değer atanmazsa açık olarak 
görüntülenecektir) verilmediği sürece bilgi öntanımlı olarak tıklanmadığı sürece gizli kalacaktır. 
<details> tagı içerisinde bulunan <summary> tagı ile başlık bilgisi belirlenebilir. (details tagı 
Internet Explorer / Edge tarayıcılarında desteklenmemektedir) 


<pre> tagı, yazıları önformatlı olduğu şekilde gösterir. Özellikle cep-tablet uyumunu sağlayan CSS 
kodlarıyla kullanıldığında çok faydalı bir tagdır. CSS kullanımı konusuna önümüzdeki derste 
değineceğiz. Bu derste sadece bu uyumu sağlayan CSS kodlarını vermekle yetineceğiz. 


Yazımızın sonlarında paylaştığımız zip dosyasını indirerek 004.html kodlarını inceleyebilirsiniz. 


<a> tagının örnek kullanımları: 


<a href—"https://www.fullportal.org">www.fullportal.org</a> 

<a href-"https://www.fullportal.org" target-" blank">www.fullportal.org</a> 

<a href-"https://www.fullportal.org" hreflang—"tr">www.fullportal.org</a> 

<a href-"./ders003.html">www.fullportal.org</a> (Aynı dizinde bulunan dosyaya link verilirken) 


<details> tagının örnek kullanımları: 


<details> <summary>Yazı Başlığı</summary> Bu bilgi başlığa tıkladığınızda görüntülenmektedir. 
</details> 

<details open-—"true"> <summary>Yazı Başlığı</summary> Bu bilgi open özelliği verildiğinden 
öntanımlı olarak görüntülenmektedir. </details> 


<pre> tagının örnek kullanımı: 


<pre> 
pre tagı ile boşluklar olduğu gibi görüntülenecektir. (Yazının fontu ve büyüklüğü standart olacaktır, 


özel olarak tanım yapılmadığı sürece. Yazının fontu ve büyüklüğü CSS ile tanımlanabilir.) style 
tagları ile cep telefonu ve tablet uyumu sağlanabilir: 

<style> 

pre ( white-space: pre-wrap; | 

pre ( font-family: monospace; | 

* ( font-size: lem; ) 

</style> 

</pre> 


Yorum Satırları 


<!-- Bu satır tarayıcınız tarafından yorum olarak değerlendirilecektir. 
Bu satır da. -> 


Bu yazı javascript yardımıyla eklenmiştir. Sayfanın kaynak koduna bakarak <script> tagının 
kullanılış örneğini ve yorum satırlarını görebilirsiniz 


Bu dersimizde ek bilgi olarak HTML üzerinde yorum yapmak için kullanacağınız <!-- ile --> 
işaretlerinden bahsedelim. Bu iki işaret kalan kısım tarayıcınız tarafından yorum olarak 
değerlendirilecek ve işleme tabi tutulmayacaktır. Sayfanın kaynak koduna baktığınızda bu yorum 
satırlarını görebileceksiniz. Kaynak koda bilgi notları eklemek için faydalanabilirsiniz. 


HTML'nin doğal programlama dili olan javascript kullandığınızda ise // işaretinden (bu işaretten 
sonraki aynı satırdaki kısım yorum olarak değerlendirilir) veya /* ile */ işaretlerinden (bu iki işaret 
arasına yazılanlar yorum olarak değerlendirilir) faydalanılabilir. Javascipt kodları <script> tagı 
kullanılarak yazılır. <noscript> tagı sayfa scriptleri çalıştırmıyorsa gösterilecek bilgi notunu 
belirtmemize yarar. <script> tagının src özelliğine atama yapılarak dışarıdan bir javascript dosyası 
da sayfada çalıştırılabilir. Ayrıca type özelliği ile betik (script) tipi (text/javascript veya 
text/ecmascript gibi) belirtilebilir, charset özelliği ile dışarıdan dahil edilen dosyanın karakter 
kodlama şekli bildirilebilir, async özelliği ile harici dosyalar için eşzamanlı çalışmama durumu 
bildirilir (sayfanın gövdelemesi --parsing-- devam ederken betik çalıştırılır), defer özelliği ile harici 
dosyalar için betiğin sayfanın gövdelemesi (parsing) tamamlandıktan sonra çalışması bildirilir. 
async ve defer özellikleri verilmezse, betik hemen çalıştırılacaktır. 


4. dersimizin dosyasını indirmek için tıklayınız. 


Ders 5 : CSS Kullanımı - HIML Dersleri 


CSS (Cascading Style Sheets - Yüklenen Stil Sayfaları), HTML sayfasının stilini tanımlamakta 
kullanılan dildir. CSS, HTML elementlerinin nasıl gösterileceğini tanımlar. HTML dili sayfaların 
içeriğini tanımlamak için oluşturulmuştu, sayfanın stilini-formatını belirlemek için değil. CSS, 
HTML taglarında stil belirleme işinin kaldırılmasını kolaylaştırdı. (font, basefont, center gibi taglar 
HTML ile birlikte kaldırıldı) Ayrıca büyük bir kullanım kolaylığı sağlanmış oldu, tüm sayfalarda 
geçerli olacak şekilde tanımlanan harici CSS dosyaları sayesinde yüzlerce HTML dosyasında aynı 
anda değişiklik yapmak kolay hale geldi. 


Profesyoneller tarafından hazırlanan W3.css, bootstrap.css veya benzeri dosyaları internet sitesi 
yapımında kullanmak büyük kolaylıklar sağlar, cep-tablet uyumunu da en iyi şekilde sağlamanıza 
yardımcı olur. 


CSS'nin nasıl kullanılabileceğini inceleyelim: 


Harici dosya ile 


Head tagları arasında harici dosya belirtilerek kullanılabilir: 
<link type-"text/css" rel-"stylesheet" href—"./W3.css"> 


Style tagı ile 

<style> 
.sinif1(color:green;background-color:agua; | 
#id1fcolor:blue;background-color:agua;) </style> 


Harici dosya ve style tagı kullanarak yaptığınız tanımlamaları, uygun taga class ve id özelliğini 
tanımlayarak kullanabilirsiniz. Ayrıca direkt olarak tag isimlerini yazarak özellik aktarabilirsiniz. . 
işareti class tanımlamakta, # işareti ise id tanımlamakta kullanılır. Örneğin tanımladığımız "sinif1" 
class'ını div tagında şu şekilde kullanabiliriz: 

<div class>"sinif1">Selam</div> 


Direkt tagın içerisinde tanımlayarak: 
<div style—"font-size:20px;font-style:italic;"> 
Bu bir denemedir 


</div> 


5. dersimizin dosyalarını indirmek için tıklayınız. 


Ders 6 : Önemli Meta Tagları 


6. dersimize kadar <head> ile </head> tagları arasına yazılan şu kodları öğrenmiştik: 


<meta name-"viewport" content-"width-device-width, initial-scale-1"> 
Sayfa ölçeğinin giriş yapılan aygıtın ölçülerine göre ayarlanacağını bildiren koddur. (Cep-tablet 
uyumluluğu için) 


<meta charset-"UTF-8"> 
Karakter kodlamasını belirten koddur. (Karakter kodlaması verilmezse ç,ş,ö ve benzeri Türkçe 
karakterler düzgün görüntülenmeyebilirler.) 


<ütle>Ders 6 : Önemli Meta Tagları - HTML Dersleri</title> 
Sitemizin üst başlığını bildirdiğimiz koddur. 


<link type-"text/css" rel-"stylesheet" href—"./W3.css"> 
Sayfaya harici bir stil sayfası dahil etmemizi sağlayan koddur. href özelliği ile atadığınız css dosyası 
sayfaya dahil edilecektir. 


<style> ... Y/style> 

CSS kodlarını bu etiket ile tanımlarız. style tagı eğer belli bir element ve alt elementleri için 
kullanılmayacaksa yani sayfanın tümü için geçerli olacaksa head tagları arasında yer almalıdır. body 
tagı içerisinde kullanılırsa style tagının üst elementi ve bu üst elementin alt elementlerinde geçerli 
olacaktır. 


Bu dersimizde meta tagları yanı sıra head tagları arasına yazılan style, title gibi diğer önemli bazı 
taglara da değineceğiz: 


<meta namez"description" content-"Ders 6 : Önemli Meta Tagları - HTML Dersleri"> 
Arama motorları için en önemli taglardan biridir, sayfanın tanımlandığı bilgiyi içerir, her sayfanız 
için ayrı tanımlama yapılması tavsiye edilir. 


<meta namez"keywords" contentz"Ders 6, Önemli Meta Tagları, HTML Dersleri"> 
Arama motorları için en önemli taglardan biridir, sayfanın anahtar kelimelerine dair bilgiyi içerir, 
her sayfanız için ayrı tanımlama yapılması tavsiye edilir. 


<meta name-"date" content-"2017-11-12117:15:4240300" > 
Sayfanın tarih bilgisini bildiren koddur. Tarayıcınızın tarihi anlaması için standartlara uygun 
yazılması gerekmektedir. 


<meta name-"revised" content-"2017-11-12117:15:4240300"> 
Sayfanın güncellendiği tarihi belirten koddur. Tarayıcınızın tarihi anlaması için standartlara uygun 
yazılması gerekmektedir. 


<meta name—"robots" content—"index, follow"> 
Bu tagı koyduğunuz sayfa arama motorları tarafından indekslenecek, linkleri takip edilecektir. 
Sayfanın arama motorlarında görünmesini istiyorsanız bu kodu ekleyebilirsiniz. 


<meta name—"robots" content—"noindex, nofollow"> 
Bu tagı koyduğunuz sayfa arama motorları tarafından indekslenmeyecek, linkleri takip 
edilmeyecektir. Sayfanın arama motorlarında görünmesini istemiyorsanız bu kodu ekleyebilirsiniz. 


<meta http-eguiv-"refresh" content-"20"> 
Bu tag ile sayfa her 20 saniyede bir yenilenecektir. 


<link rel<"icon" href—"./favicon.ico" type-"image/x-icon"> 

Böyle bir tag ile sitenizin tarayıcılarda gösterilecek simgesini ayarlayabilirsiniz. (Siteniz için bir 
favicon.ico veya favicon.png benzeri uygun boyutlu bir simge hazırladıktan sonra) Dilerseniz konu 
ile ilgili yazımıza göz atabilirsiniz : www.fullportal.org/GNULINUX/Gimp/websitesimgesi.html 


<script src-"betik.js"></script> 
Benzeri bir kod ile javascript dosyasını sayfaya dahil edebiliriz. Bu kodu head veya body tagları 
arasında kullanabiliriz. 


Ayrıca ek olarak şunu da belirtelim, html tagına giriş yapılan lang özelliği ile sayfanın dili 
bildirilebilir, örneğin sayfanın Türkçe yazıldığının bildirimi için: 

<html lang-"tr"> 

kodu yazılır. 


6. dersimizin dosyasını indirmek için tıklayınız. 


Ders 7 : Kayan Yazılar - HTML Dersleri 


<marguce>Selam Olsun Herkese</marguce> 








<marguce width—-"4096">width ile genişlik belirlenebilir</marguce> 


<marguee loop-"2">loop ile geçiş sayısı belirlenebilir</marguce> 


<marguece vspace—"36px">vspace ile de yükseklik belirlenebilir</marguce> 





<marguee hspace-400 bgcolor-yellow>hspace ile uzunluk belirlenebilir</marguce> 





<marguee behavior-"scroll">Bu yazı behavior—"scroll" özelliği ile geçmektedir.</marguce> 


<marguee direction-up height-"76px">direction ile yazının yönü belirlenebilir</marguece> 


Yukarıda bir örnekte <hr> taglarını da kullandık. <hr> tagı, konu değişikliğini belirtmek için 
kullanılabilir. Bu tag kullanıldığında birçok tarayıcı yatay bir çizgi görüntüleyecektir. 


7. dersimizin dosyasını indirmek için tıklayınız. Html uzantılı dosyayı tarayıcınızda açarak nasıl bir 
etki oluşturduklarını görebilirsiniz. 


Ders 8 : Özel HTML Karakterleri - HTML 
Dersleri 


Karakterlerin isim kodu veya onaltılık kodları HTML sayfalarında kullanıldığında sayfanın 
kodlama şekli ne seçilirse seçilsin bu karakterler doğru biçimde görüntüleneceklerdir. (Tabii isim 
kodlamalarını desteklemeyen bazı çok eski tarayıcılar hariç) Karışık Semboller kısmında bulunan 
karakterler UTF-8 karakter kodlama sistemi ile HTML sayfalarında kullanılabilirler. (Kopyala- 
yapıştır yöntemiyle HTML sayfanızın kaynak kodunda kullanabilirsiniz) 


Küçüktür &lt; 
Büyüktür &gt; 


e “$ &supl; &#185; 
2? Üs2 &sup2; &#178; 
3 Üs3 &sup3; &#179; 
1 Üs4 848308; 

5 Üs5 &#48309; 

68 Üs6 &H8310; 

i “dls7 &#8311,; 

8 Üs8 &#8312; 

9 Üs9g &#8313; 

* Üst &#B314; 

> işe &H8315; 

w ÜŞE &#8316; 

© Üs( &#8317; 

). Üs) &#8318; 

n Üsn &#8319; 

g alt0 &48320; 

t Türklirası oO(&#8378; &#x20BA; 
€ Furo &euro; &#8364; 
$ Dolar &#36; 

€ Sent &cent; &#162; 
Y Yen &yen; &#165; 
£ Pound &pound; o &#163; 
a GenelDöviz &curren; &#164; 
© Telif Hakkı o &copy; &#169; 
© Tescilli Marka &reg; &#4174; 


pe 
< 


Ticari Marka &trade; 


© E-mail imi &#64; 

& VE &amp; &#38; 
“| Paragraf &para; &#4182; 
— Orta Çizgi &mdash; &#151; 
- DEĞİL &not; &#172; 


A 


Sola &lIsaguo; 


SEMT UTÜUR ye tp, — 


ew 


N ma 


w 


Çift-Sola 
Sağa 
Çift-Sağa 
Yukarı Ok 
Sağa Ok 
Aşağı Ok 
Sola Ok 
Maça 
Sinek 
Kupa 
Karo 
Açıklama 
Açıklama 
Eth 
Thorn 
Thorn 
Ters Soru 
Mikro 
Derece 
Bölüm 
Slash 
Slash 
Alt1 
Alt2 
Alt3 
Alt4 
Alt5 

Alt 6 
Alt7 
Alt8 
Alt9 
2'de 1 
4'te 1 
4'te 3 
5te4 
6'da 1 
6'da 5 
8'de 1 
8'de 3 
8'de 5 
8'de 7 

'de 1 

Bir (Roma) 


&laguo; &#171; 
&rsaguo; 
&raguo; &#187; 
&ualr; 
&rarr; 
&darr; 
&larr; 
&spades; 
&clubs; 
&hearts; 
&diams; 
&AElig; o &#198; 
&aelig; &4#230; 
&ETH; &4#4208; 
&THORN; &#222; 
&thomn; &H254; 
&iguest; G&#191; 
&micro; &#181; 
&deg; &#176; 
&sect; &#167; 
&Oslash; o&#216; 
&oslash; o &#248; 
&#8321; 
&#H8322; 
&HB323; 
&HB324; 
&#H8325; 
&48326; 
&HB327; 
&48328; 
&#8329; 
&frac12; oO&#189; 
&frac14; o&#188; 
&frac34; o&#190; 
&frac45; oO&H#8536; 
&#H8537; 
&#8538; 
&#8539; 
&#8540; 
&#8541; 
&#8542; 
&#8543; 
&#H8544; 





II İki (Roma) &48545; 
M Üç(Roma) Oo &#8546; 
W Dört(Roma) &#8547; 
— Eksi &48722; 
* Artı &#43; 

Çarpı &times; &#215; 
> Bölü &divide; o&#247; 
F- Eksi Artı &#x2213; &#8723; 
Z Eşit Değil &#8800; 
< Küçük Eşittir &#8804; 
> Büyük Eşittir &#8805; 
e« Elemanıdır &isin; &#48712; 
© Sonsuz G&#8734; 
« XI(Yunan) o&Xi; &4#x039E; 
3 Mevcut Gexist; &#8707; 
A Delta &#48710; 
/ İntegral &int; 848747; 
> Sigma &sum; &#8721; 
vV Kare Kök &radic; 848730; 
5 Boş Küme &empiy; o &#8709; 

Orta Nokta &sdot; &#48729; 
ax Benzeri &eguiv; &#8801; 
& K. Benzeri &#x2263; &H8803; 
Z Açı &ang; &#x2220; 
»* Asteriks &lowast; o&#8727; 
v Hepsi &forall; &#48704; 
Karışık Semboller 

ğ ii ş A 
VİMEvVİ KALSA Akik b e 
*#© Vw hek. 7) e e 
Kİ EU xlEUS5nM kW JE Ce 6 V 
AŞ LL LE N sa 


>merr İri 





CO YI, < ,CIOR* (898 Pe SEV AĞ 'İNj7 
ii 1 3EB ÖZE KKOSYOOAŞA 
e 
EV m Bi TY DI NoV Le — p 


, <», şk——b DOM sura Sİ 
â 5 0800 re <DOk KKK 
#*OLOIUJI*$4a00006098900900X606Yy009 
OS HhmHe->-1TLfavflnuzZ<£ajflıl)|I1H 
FK aBP ma«f»evaTpl 
z esek irdkh LHANKRŞOL--İ 

1——lbl2WSsET3USİpaRA<>> : 

vs» EpRel> lek vlesem$f ie? 
>» ea fe ltiiliitrKuMiel 

Se» bana bi Ta u»4— 
> > uy >> > ui bD yap» mi 
»gG >» Çİ. ER X 63 
& Y( sem» >» 0G ——> — — —> —© —i 

KR — ER ww» pp EPP epAaApRİİM | c--> <->» 
—-—T ll »»»>»8- mx >— ep ZN Z YP NR 
SXKXXNAXNXARRA dk) (e 


açdLOOPSdpaç»efsel ll 


























Şarz > NI —D5»54 >» pE<55€z2 
NAL enaz snasssi>j<>c>f#Yu9o08 
veehbbhffkkisikR<ififxkP$NNAİtlN 
|tobfiJIAKİShhIVTTİBIBMATTAT 
#XM&İRATAKXEXİKL Teuüahavı ng aa8 
bEöbbÖ ONEMLİ —E (ŞI ww 
AA F GA 


8. dersimizin dosyasını indirmek için tıklayınız. 


Ders 9 : Table, Div, Span Tagları - HTML 
Dersleri 


<table> tagı, tablo oluşturmakta kullanılır. <tr> tagı ile tablonun satırları, <td> tagı ile tablonun 
sütunları eklenebilir. Dilenirse <th> tagı ile tablonun sütun başlıkları tanımlanabilir. <caption> tagı 
ile tablonun başlığı tanımlanabilir. Ayrıca tablonun üst kısmı <thead> tagı ile, orta kısmı <tbody> 
tagı ile, alt kısmı ise <tfoot> tagı yardımı ile belirlenebilir. Sütunların bazı niteliklerini ayrı ayrı 
biçimlendirmek için <colgroup> ve <col> tagları kullanılabilir. (colgroup ve col tagları yerine CSS 
ile tanımlama yapmak daha doğru bir yaklaşım olacaktır. )Üç satır (biri sütun başlıklarından 
oluşmakta) ve ikişer sütundan oluşan basit bir tablo örneği: 


<table> 
<caption>İllerin Plaka Numaraları</caption> 
<tr> 

<th>İl Adı</th> 
<th>Plaka No.</th> 
<> 

<tr> 
<td>Ankara</td> 
<td>06</4d> 

</tr> 

<tr> 
<td>İstanbul</td> 
<td>34</td> 

<> 

<tr> 
<td>İzmir</Ad> 
<td>35</4d> 

<> 

</table> 


Tablomuzu güzelleştirmek için şöyle bir kodu head tagları arasına ilave edebiliriz: 
<style> body (background-color:blue; | 

table, tr, th, td (border:Ipx; padding;:2px; border-style:solid; border-color:black; | 
</style> 


İllerin Plaka 
Numaraları 


İl Adı Plaka No. 


Ankara 06 
İstanbul 34 


4111 NC 1 





thead, tbody, tfoot taglarının kullanıldığı örnek tabloyu ve colgroup, col taglarının kullanımını 9. 
dersimizin dosyasının (009.zip) içerisinde bulabilirsiniz. 


<div> tagı, HTML sayfasındaki bir bölümü, bir kısmı tanımlamak için kullanılır. div tagından önce 
ve sonra birçok tarayıcı satır boşluğu verir. Örnek kullanım: 
<div style-"background-color:green;">Div tagının kullanımına örnektir.</div> 


<span> tagı, bölüm veya satır içindeki kısımsal tanımlamalarda kullanılır. Örnek kullanım: 
<span style-"background-color:green;">Span tagının kullanımına örnektir.</span> Bu kısım span 
tagının dışındadır. 


kısım span tagının dışındadır. 


9. dersimizin dosyasını indirmek için tıklayınız. 


Öneriler 


https://Www.w3schools.com/html/default.asp adresine giderek html konusunda çok daha ayrıntılı 
bilgilere göz atabilir, son standartları öğrenebilir, “Kendin Dene” (“Try It Yourself”) butonu ile 
kodlama yaparak karşılacağınız sonuçları editörden görebilirsiniz. En üstteki dünya simgesine 
tıklayarak dili Türkçe olarak seçerek, bu sitedeki yazıları “google translate” aracılığı ile dilimize 
çevirebilirsiniz. Ayrıca sitede CSS, Javascript, PHP gibi başlıklar altında HTML ile ilgili başka 
önemli dersler de bulunmaktadır. Bu site, kendinizi internet site tasarımı konusunda geliştirmek için 
muhteşem bir kaynaktır. 


Html standartlarına göre html dosyalarınızdaki hataları denetlemek için https://validator.w3.org/ 
internet sitesini kullanabilirsiniz. Sitenin dili ingilizcedir. CSS denetlemeleri için ise 


https://jigsaw.w3.org/css-validator/ sitesini kullanabilirsiniz. 


Yapacağınız internet sitelerinde ücretsiz resimler bulmak için https://pixabay.com/ sitesi en iyi 





alternatiflerden biridir. 


